<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>多点比较</title>
<style type="text/css">
.button {
	position: absolute;
	left: 430px;
	top: 8px;
	font-style: italic;
}
.button1 {
	position: absolute;
	left: 6px;
	top: 0px;
	font-style: italic; 
}
.chart {
	position: absolute;
	left: 0px;
	top: 10px;
}
</style>
<link rel="stylesheet" type="text/css"
	href="../ext/resources/css/ext-all.css"></link>
<link rel="stylesheet" type="text/css" href="../ext/resources/css/xtheme-slate.css"></link>
<script src="../ext/adapter/ext/ext-base.js"></script>
<script src="../ext/ext-all.js"></script>
<script src="../ext/src/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
	Ext
			.onReady(function() {
				Ext.Ajax.on('requestcomplete',checkUserSessionStatus, this);      
				function checkUserSessionStatus(conn,response,options){      
				    if(response.getResponseHeader('sessionstatus')){      
				    	parent.location.href='/xdj/index.jsp';   
				    }      
				}  
				var resultForm;
				var ids = "" ;
				//Ext.BLANK_IMAGE_URL='ext/resources/images/default/s.gif';
				var treeloader = new Ext.tree.TreeLoader({ // dataUrl : 'tree.jsp'//这里可以不需要指定URL，在加载前事件响应里面设置 	
				});
				var rootnode = new Ext.tree.AsyncTreeNode({ // 异步加载根节点 
					id : '2',
					text : '金山热电厂',
					cls : 'folder'
				});
			var	 thenode = rootnode;
				var tree = new Ext.tree.TreePanel({
					id: 'treePanel',
					el : 'tree',// 将树形添加到一个指定的div中,非常重要！  
					border : false,
					region : 'west',
					//title : '功能菜单',  
					lines : false, //线段
					width : 200,
					height : 500,
					split : true,
					//autoHeight : true,  
					frame : true,// 美化界面    
					enableDD : false,// 是否支持拖拽效果  
					//containerScroll : true,// 是否支持滚动条  
					autoScroll : true,
					rootVisible : true, // 是否隐藏根节点,很多情况下，我们选择隐藏根节点增加美观性  
					animate : true, // 动画效果  
					root : rootnode,
					loader : treeloader,
					listeners : {
						'beforeload' : function(node) {
							treeloader.dataUrl = "point_loadtree?nodeDepth="
									+ node.getDepth() + "&nodeId=" + node.id;
						},
						'click' : function(node) {
							
							if(!Ext.getCmp("resultForm").isVisible()){
								Ext.getCmp("resultForm").show() ;
							}
							if(!Ext.getCmp("gridPanel").isVisible()){
								Ext.getCmp("gridPanel").show();
							}
							if(Ext.getCmp("chartPanel").isVisible()){
								Ext.getCmp("chartPanel").hide();	
							}
							if(Ext.getCmp("gridPanel2").isVisible()) {
								Ext.getCmp("gridPanel2").hide();	
							}
							/*
							thenode = node;
							if (thenode.getDepth() == 3) {
								store.load({
									params : {
										nodeDepth : node.getDepth(),
										nodeId : node.id
									}
								});
							}
							*/
						},
						'checkchange' : function(node){
							if(!Ext.getCmp("resultForm").isVisible()){
								Ext.getCmp("resultForm").show() ;
							}
							if(!Ext.getCmp("gridPanel").isVisible()){
								Ext.getCmp("gridPanel").show();
							}
							if(Ext.getCmp("chartPanel").isVisible()){
								Ext.getCmp("chartPanel").hide();	
							}
							if(Ext.getCmp("gridPanel2").isVisible()) {
								Ext.getCmp("gridPanel2").hide();	
							}
							thenode = node;
							ids = "" ;
							var	oRecords = tree.getChecked();
							Ext.each(oRecords, function(node){
								ids += node.id+",";
							});
							ids = ids.substring(0,ids.length);
							store.load({
								params : {
									nodeDepth : node.getDepth(),
									nodeId : node.id,
									deviceIDs : ids 
								}
							});
							
						}
					}
				// 树加载  
				});
				tree.render(); // 渲染树形
				var cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), //自动增加序列号
				//sm, //加到每列的前边
				//{header:'巡检部位',dataIndex:"alCode",sortable:true}, //True表示为可在该列上进行排列
				{
					header : '巡检项目',
					dataIndex : "chkItem"
				}, {
					header : '项目类型',
					dataIndex : "chkTypeName"
				}]);//定义相应的列模型
				var store = new Ext.data.JsonStore({
					url : 'point_loadtree',
					fields : ["chkItem","chkTypeName"]
				});//存储前两项的定义的东西，将其连接起来

				var panel = new Ext.grid.GridPanel({
					id : 'gridPanel' ,
					cm : cm,
					//sm:sm,
					store : store,
					autoHeight : true, //设置表格的高度 true为自动获取表格的大小
					renderTo : 'grid', //渲染容器
					enableColumnMove : false,//不可以使表格列移动
					enableColumnResize : false, //不可以改变列的宽度
					stripeRows : false, //True表示为显示行的分隔符
					loadMask : true, //会有一个Ext.LoadMask的遮罩效果
					trackMouseOver : true, //True表示为鼠标移动时高亮显示（默认为true）。
					enableDragDrop : true,
					viewConfig : {
						forceFit : true
					//让没列自动填满表格，根据你设置的宽度按比例分配
					},
					bbar : new Ext.PagingToolbar({
						pageSize : 3, //每页显示几条
						store : store,
						displayInfo : true,
						displayMsg : '显示{0}，到{1}条，一共{2}', //固定写法
						emptyMsg : '无此记录'
					})
				});

				resultForm = new Ext.form.FormPanel({
					id : 'resultForm' ,
					frame : true,
					height : 80,
					buttonAlign : 'top',
					labelAlign : 'right',
					layout : 'form',
					items : [ {
						layout : 'column',
						items : [ {
							layout : 'form',
							labelWidth : 80,
							items : [ {
								name : 'startTime',
								fieldLabel : '巡检时间',
								width : 120,
								xtype : 'datefield',
								format : 'Y-m-d',
								allowBlank : false,
								blankText : '时间不能为空'
							} ]
						}, {
							labelWidth : 80,
							layout : 'form',
							items : [ {
								name : 'endTime',
								fieldLabel : '到',
								width : 120,
								xtype : 'datefield',
								format : 'Y-m-d',
								allowBlank : false,
								blankText : '时间不能为空'
							} ]
						} ]
					}, {
						layout : 'column',
						items : [ {
							labelWidth : 80,
							layout : 'form',
							items : [ {
								fieldLabel : '时间精度',
								width : 120,
								xtype : 'combo',
								hiddenName : 'precision',
								emptyText : '--请选择--',
								forceSelection : true,
								store : new Ext.data.JsonStore({
							        fields:['name', 'value'],
							        data: [
							            {name:'天', value: 'DAY'},
							            {name:'周', value: 'WEEK'},
							            {name:'月', value: 'MONTH'}
							        ]
							    }),
								listWidth : 120,
								valueField : 'value',
								displayField : 'name',
								typeAhead : true,
								mode : 'local',
								triggerAction : 'all',
								selectOnFocus : true,
								allowBlank : false,
								blankText : '时间精度不能为空'
							} ]
						}, {
							labelWidth : 80,
							layout : 'form',
							items : [ {
								fieldLabel : '处理方法',
								width : 120,
								xtype : 'combo',
								hiddenName : 'dispose',
								emptyText : '--请选择--',
								forceSelection : true,
								store : new Ext.data.JsonStore({
							        fields:['name', 'value'],
							        data: [
							            {name:'平均值', value: 'AVG'}
							        ]
							    }),
								listWidth : 120,
								valueField : 'value',
								displayField : 'name',
								typeAhead : true,
								mode : 'local',
								triggerAction : 'all',
								selectOnFocus : true,
								allowBlank : false,
								blankText : '处理方法不能为空'
							} ]
						}, {
							xtype:'hidden',
							name:'chkItem'
						}, {
							xtype:'hidden',
							name:'chkItem'
						}]
					} ],
					buttons : [ {
						text : "分析",disabled:true,id:'cOpenBox',
						cls : 'button',
						handler : function() {
							if ( resultForm.getForm().isValid() ){
								var record=panel.getSelectionModel().getSelected();
								if(record!=null) {
									Ext.getCmp("resultForm").hide() ;
									Ext.getCmp("gridPanel").hide() ;
									Ext.getCmp("chartPanel").show() ;
									Ext.getCmp("gridPanel2").show() ;
									alert("----------1");
									resultForm.getForm().setValues({
										'chkItem' : record.get("chkItem") ,
										'deviceIDs' : ids
									});
									alert("----------2");
									resultForm.form.submit({
										waitMsg : '正在分析.....',   
							            method:'post',   
										url:'point_analysis',
										success:function(resultForm,action){
											var result = Ext.util.JSON.decode(action.response.responseText);
											if(result.success==true){
												chartStore.loadData(result.res,false) ; 
											}else{
												Ext.Msg.alert("提示","操作失败，请重试。") ;
											}
										}
									});
								}else{
									Ext.Msg.alert("提示","操作失败，请选择检查问题。") ;
								}
							}
							
						}
					} ]
				});
				var form = new Ext.form.FormPanel(
						{
							id:'formPanel' ,
							height : 100,
							html : '<p>部门信息树采用四层结构<br>第一层：企业或企业分厂<br>第二层：专业划分<br>第三层：系统及管理区域<br>第四层：具体设备描述</p>',
							frame : true
						});
				
				
				var chartStore = new Ext.data.JsonStore({
					fields : [ "devName", "chkTime","avgValue" ]
				});
				
				var cm1 = new Ext.grid.ColumnModel([ 
					new Ext.grid.RowNumberer(), //自动增加序列号
					{
						header : '设备名称',
						dataIndex : "devName"
					},{
						header : '巡检时间',
						dataIndex : "chkTime"
					},{
						header : '测量平均值',
						dataIndex : "avgValue"
					}
			 	]);//定义相应的列模型
			 	
			 	var gridPanel2 = new Ext.grid.GridPanel({
					id : 'gridPanel2' ,
					cm : cm1,
					//sm:sm,
					store : chartStore,
					autoHeight : true, //设置表格的高度 true为自动获取表格的大小
					renderTo : 'grid2', //渲染容器
					enableColumnMove : false,//不可以使表格列移动
					enableColumnResize : false, //不可以改变列的宽度
					stripeRows : false, //True表示为显示行的分隔符
					loadMask : true, //会有一个Ext.LoadMask的遮罩效果
					trackMouseOver : true, //True表示为鼠标移动时高亮显示（默认为true）。
					enableDragDrop : true,
					hidden: true,
					viewConfig : {
						forceFit : true
					//让没列自动填满表格，根据你设置的宽度按比例分配
					},
					bbar : new Ext.PagingToolbar({
						pageSize : 3, //每页显示几条
						store : store,
						displayInfo : true,
						displayMsg : '显示{0}，到{1}条，一共{2}', //固定写法
						emptyMsg : '无此记录'
					})
				});
				
				var chartPanel =  new Ext.Panel({
					id : 'chartPanel' ,
			       // cls:'chart',
			        frame:true,
			        renderTo: 'container',
			        width:1000,
			        height:200,
			      // autoHeight:true,
			       hidden:true,
			        layout:'fit',

			        items:[ {
			            xtype: 'linechart',
			            height:260,
			            store: chartStore,
			            xField: 'chkTime',
			            yField: 'avgValue',
			            yAxis: new Ext.chart.NumericAxis({
			            	 title: '测量平均值'
			            }),
			            xAxis: new Ext.chart.CategoryAxis({
			                title: '时间'
			            })
			        }]
			       
			        	
			        
			    });
				
				var v = new Ext.Viewport({
					layout : 'border', // 使用border布局  
					border : false,
					items : [ {
						region : 'west',
						border : false,
						width : 200,
						items : [ tree, {
							//height : 140,
							width : 300,
							items : [ form ]
						} ]
					}, {
						region : 'center',
						border : false,
						items : [ resultForm, panel ,chartPanel,gridPanel2]
					} ],
					listeners:{
						'beforerender' : function(cmp) {
							// set role
							var store=new Ext.data.JsonStore({
								url: '../system/role_loadFunc?funcCode=ControlMultiDevice',
								autoLoad : true,
								fields: ["functioncode"]
							});
							store.load({
							    callback: function(records, options, success){
							    	var i=0;
							    	for(; i<records.length; i++) {
							    		var id = records[i].get("functioncode");
							    		//alert('d'+Ext.getCmp('56').text);
							    		if(Ext.getCmp(id)!=null) {
							    			Ext.getCmp(id).setDisabled(false);
							    		}
							        }
							    },
							    scope: store
							});
						}
					}
				});


			});
</script>
</head>
<body>
	<div id="tree"></div>
	<div id="grid"></div>
	<div id="container"></div>
	<div id="grid2"></div>
</body>
</html>